/* 
    这就是一个工具类函数  我把可能会用到的一些函数 放进来
    那一个 html 文件里面要用了 我就直接把这个文件引入就可以使用了

*/

/* 
    求任意个数字和的函数

*/
function sum() {
	// 下标从 0 开始   i  <  总共有多少条数据
	var sum = 0
	for (var i = 0; i < arguments.length; i++) {
		sum += arguments[i]
	}
	return sum
}

/* 
    求范围之间随机数
    @param a 范围下限
    @param b 范围上限
    @return 范围之间的随机数 能够取到 a 和 b
*/
function getRandom(a, b) {
	return Math.floor(Math.random() * (b - a + 1) + a)
}

/* 
    求随机颜色字符串的方法
*/
function getColor(a) {
	// a 参数传了就用你的 没传就用我默认的
	a = a === 0 ? a : a || 1
	// if(a === 0){
	//     a = 0
	// }else {
	//     a = a || 1
	// }
	return 'rgba(' + getRandom(0, 255) + ',' + getRandom(0, 255) + ',' + getRandom(0, 255) + ',' + a + ')'
}
/*
    兼容 document.documentElement.scrollTop 和 document.body.scrollTop 代码
*/
function scrollTopLeft() {
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
	var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
	return {
		scrollTop: scrollTop,
		scrollLeft: scrollLeft
	}
}

/* 
    封装一个 css 函数 可以传 2 个 或者 3 个参数
    @param ele 要获取/设置的元素
    @param attr 要获取/设置的属性
    @param value 要设置的属性值(可选)
*/
function css(ele, attr, value) {
	// 判断  如果第三个参数有 那就是设置  如果没有就是获取
	if (typeof value === 'undefined') {
		// 没有第三个参数 那这儿就是获取
		return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : ele.currentStyle[attr]
	}
	// 如果没有执行 if 判断 那就直接执行下面这段代码
	// 有第三个参数 设置
	ele.style[attr] = value

}
/* 
    @param selector 选择器 
    @param context 元素范围
    @return 获取到的元素或者元素集合
*/
function my$(selector, context) {
	context = context || document
	if (selector.indexOf('#') === 0) {
		return document.getElementById(selector.slice(1))
	} else if (selector.slice(0, 1) === '.') {
		return context.getElementsByClassName(selector.slice(1))
	} else {
		return context.getElementsByTagName(selector)
	}
}

/* 
    @param ele 要绑定事件的元素
    @param type 事件类型
    @param fn 事件处理函数
*/
function on(ele, type, fn) {
	if (ele.addEventListener) {
		if (type.indexOf('on') === 0) {
			type = type.slice(2)
		}
		ele.addEventListener(type, fn)
	} else {
		if (type.indexOf('on') !== 0) {
			type = 'on' + type
		}
		ele.attachEvent(type, fn)
	}
}
/* 
    @param ele 要绑定事件的元素
    @param type 事件类型
    @param fn 事件处理函数

*/

function off(ele, type, fn) {
	if (ele.removeEventListener) {
		if (type.indexOf('on') === 0) {
			type = type.slice(2)
		}
		ele.removeEventListener(type, fn)
	} else {
		if (type.indexOf('on') !== 0) {
			type = 'on' + type
		}
		ele.detachEvent(type, fn)
	}
}


/* 
    @param ele 执行运动的元素
    @param options 要改变的那些属性
    @param duration 运动的总时间
    @param callback 运动完成执行的回调函数
*/

function animate(ele, options, duration, callback) {
	clearInterval(ele.timer)
	let start = {},
		range = {}
	for (let key in options) {
		start[key] = parseFloat(css(ele, key))
		range[key] = options[key] - start[key]
	}
	let startTime = +new Date()
	ele.timer = setInterval(() => {
		let nowTime = +new Date()
		let timeDifference = Math.min(nowTime - startTime, duration)
		for (let attr in options) {
			let res = range[attr] / duration * timeDifference + start[attr]
			res = attr === 'opacity' ? res : res + 'px'
			ele.style[attr] = res
		}
		if (timeDifference >= duration) {
			clearInterval(ele.timer)
			callback && callback()
		}
	}, 10)
}
/* 
    @param ele 要淡入的元素
    @param duration  淡入的时间
    @param fn 淡入完成以后执行的回调函数
*/
function fadeIn(ele, duration, fn) {
	css(ele, 'display', 'block')
	css(ele, 'opacity', 0)
	animate(ele, {
		opacity: 1
	}, duration, fn)
}
/* 
    @param ele 要淡出的元素
    @param duration  淡出的时间
    @param fn 淡出完成以后执行的回调函数
*/
function fadeOut(ele, duration, fn) {
	css(ele, 'display', 'block')
	css(ele, 'opacity', 1)
	animate(ele, {
		opacity: 0
	}, duration, fn)
}

/* 
    获取元素 content + padding 的宽度
    @param ele 要获取的元素
    @return 元素 content + padding 的宽度
*/

function inWidth(ele) {
	if (css(ele, 'display') === 'none') {
		return parseFloat(css(ele, 'width')) + parseFloat(css(ele, 'paddingLeft')) + parseFloat(css(ele, 'paddingRight'))
	}
	return ele.clientWidth
}
/* 
    获取元素 content + padding 的高度
    @param ele 要获取的元素
    @return 元素 content + padding 的高度
*/
function inHeight(ele) {
	if (css(ele, 'display') === 'none') {
		return parseFloat(css(ele, 'height')) + parseFloat(css(ele, 'paddingTop')) + parseFloat(css(ele, 'paddingBottom'))
	}
	return ele.clientHeight
}
/* 
    获取元素 content + padding + border 的宽度
    @param ele 要获取的元素
    @return 元素 content + padding + border 的宽度
*/
function outWidth(ele) {
	if (css(ele, 'display') === 'none') {
		return parseFloat(css(ele, 'width')) + parseFloat(css(ele, 'paddingLeft')) + parseFloat(css(ele, 'paddingRight')) +
			parseFloat(css(ele, 'borderLeftWidth')) + parseFloat(css(ele, 'borderRightWidth'))
	}
	return ele.offsetWidth
}
/* 
    获取元素 content + padding + border 的高度
    @param ele 要获取的元素
    @return 元素 content + padding + border 的高度
*/
function outHeight(ele) {
	if (css(ele, 'display') === 'none') {
		return parseFloat(css(ele, 'height')) + parseFloat(css(ele, 'paddingTop')) + parseFloat(css(ele, 'paddingBottom')) +
			parseFloat(css(ele, 'borderTopWidth')) + parseFloat(css(ele, 'borderBottomWidth'))
	}
	return ele.offsetHeight
}
